<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<meta name="keywords" content="java在线培训机构，java学习，java视频教程">
    <meta name="description" content="Java1234课堂是高品质的Java视频课程平台。为励志成为Java全栈工程师的程序员们，提供优质的后端技术、前端技术、数据库、服务器视频教程。">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="/systemImages/favicon.ico" rel="SHORTCUT ICON">
    <title th:text="${title}+'-'+${application.propertyMap['k1']}"></title>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/css/css.css"/>
    <link rel="stylesheet" href="/css/wapcss.css"/>
    <link rel="stylesheet" type="text/css" href="/css/normalize.css" />
    <link rel="stylesheet" href="/css/font-awesome.min.css" />
</head>
<body>
<div class="wap_top">
    <div class="wap_header" th:include="wapcommon/head::#h" />

    <div  th:include="wapcommon/menu::#m" />
</div>

<div class="wap_detail_courseList">
    <div class="course_search">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">课程类别：</label>
                <div class="layui-input-block">
                    <select name="interest" lay-filter="s_typeId">
                        <option value="0">全部</option>
                        <option th:each="courseType:${application.courseTypeList}" th:text="${courseType.name}" th:value="${courseType.id}"></option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">课程类型：</label>
                <div class="layui-input-block">
                    <select  name="interest" lay-filter="s_type" >
                        <option value="all">全部</option>
                        <option value="free">免费课程</option>
                        <option value="vip">VIP课程</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="wap_course">
    <h1 class="wap_course_title">课程列表</h1>
    <ul id="wap_courseList">
    </ul>
</div>

<div id="loadMore" class="loadMore">
    <button type="button" class="layui-btn layui-btn-fluid" onclick="loadmMore()">加载更多</button>
</div>

<div  th:include="wapcommon/footer::#f" />


<script src="/layui/layui.js"></script>
<script src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/flexible.js"></script>
<script type="text/javascript" src="/js/iscroll.js"></script>
<script type="text/javascript" src="/js/navbarscroll.js"></script>
<script type="text/javascript">

    currentPage=1;

    typeId=0;

    type="all";
    
    function checkTypeId() {
        typeId=$("#s_typeId").val();
        loadmMore();
    }
    
    function checkType() {
        type=$("#s_type").val();
        loadmMore();
    }

    function loadmMore(){
        $.post("loadCourseList",{page:currentPage++,s_typeId:typeId,s_type:type},function (result) {
            if(result.success==true){
                var courseList=result.courseList;
                if(courseList.length==0){
                    $("#loadMore").hide();
                }
                for(var i=0;i<courseList.length;i++){
                    var course=courseList[i];
                    $("#wap_courseList").append("<li class='wap_course_item'>"
                        +"<a target='_blank' href='/course/"+course.id+"'>"
                        +"<img class='lazy' src='/courseImages/"+course.imageName+"' style='display: inline;'>"
                        +"<div class='content'>"
                        +"<h5 title='"+course.name+"'>"+course.name.substring(0,18)+"...</h5>"
                        +"</div>"
                        +"</a>"
                        +"</li>"
                    );
                }
            }
        })
    }

    layui.use(['form', 'element'], function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        form = layui.form;

        form.on('select(s_typeId)', function(data){
            $("#loadMore").show();
            currentPage=1;
            typeId=data.value;
            $("#wap_courseList").empty();
            loadmMore();
        });

        form.on('select(s_type)', function(data){
            $("#loadMore").show();
            currentPage=1;
            type=data.value;
            $("#wap_courseList").empty();
            loadmMore();
        });
    });

    $(function(){
        $('.wrapper').navbarscroll();


        $.post("loadCourseList",{page:currentPage++},function (result) {
            if(result.success==true){
                var courseList=result.courseList;
                for(var i=0;i<courseList.length;i++){
                    var course=courseList[i];
                    $("#wap_courseList").append("<li class='wap_course_item'>"
                        +"<a target='_blank' href='/course/"+course.id+"'>"
                        +"<img class='lazy' src='/courseImages/"+course.imageName+"' style='display: inline;'>"
                        +"<div class='content'>"
                        +"<h5 title='"+course.name+"'>"+course.name.substring(0,18)+"...</h5>"
                        +"</div>"
                        +"</a>"
                        +"</li>"
                    );
                }
            }
        })

    });


</script>

</body>
</html>